<template>
  <div v-if="yes"  :class="{'red': !yes, 'green': yes ,'li': true }">示例文字</div>
  <button  @click="a" :class="{'red': yes, 'green': !yes ,'btn': true } ">
    {{ yes ? "隐藏" : "显示" }}
  </button>
  <!-- <button  @click="b" class="btn green">显示</button> -->
</template>

<script setup lang="ts">
import { ref } from "vue";

const yes = ref(false);
const no = ref(true);

const a = () => {
  yes.value = !yes.value;
  no.value = !no.value;
};
// const b=no.value =!no.value;
const b = () => {
 if(yes.value){
    yes.value = !yes.value;

  };
  no.value =!no.value;
}
</script>

<style scoped>
.li {
  display: flex;
  flex: block;
}
.red {
  color: red;
  width: 100px;
  height: 30px;
}
.green {
  color: green;
}
.btn {
  width: 100px;
  height: 30px;
}
</style>
